import React from 'react';
import { Link } from 'react-router-dom';

import Pagination from 'util/pagination/index.jsx';
import TableList from 'util/table-list/index.jsx';
import PageTitle from 'component/page-title/index.jsx';

import User from 'service/user-service.jsx';
import MUtil from 'util/mm.jsx';


const _user = new User();
const _mm = new MUtil();


class UserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1
        }
    }
    componentDidMount() {
        this.loadUserList();
    }
    loadUserList() {
        _user.getUserList(this.state.pageNum).then(res => {
            this.setState(res);
        }, errMsg => {
            //请求接口出错时，先清空list
            this.setState({
                list: []
            })
            _mm.errorTips(errMsg);
        });
    }
    //当页数发生变化的时候
    onPageNumChange(pageNum) {
        this.setState({
            pageNum: pageNum
        }, () => {
            this.loadUserList();
        })
    }
    render() {
        let listBody = this.state.list.map((user, index) => {
            return (
                <tr key={index}>
                    {/* key值是react在渲染数据时，要求必须加的属性 */}
                    <td>{user.id}</td>
                    <td>{user.username}</td>
                    <td>{user.email}</td>
                    <td>{user.phone}</td>
                    <td>{new Date(user.createTime).toLocaleString()}</td>
                </tr>
            )
        });
        return (
            <div id="page-wrapper">
                <PageTitle title='用户列表'></PageTitle>
                <TableList tableHeads={['ID','用户名', '邮箱', '电话', '注册时间']}>{listBody}</TableList>
                <Pagination current={this.state.pageNum}
                    total={this.state.total}
                    onChange={pageNum => this.onPageNumChange(pageNum)}>
                </Pagination>
            </div>
        )
    }

}

export default UserList